<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 详细页 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详细</title>
    <link rel="stylesheet" href="./css/detailed.css">
</head>
<body>
    <div class="whole">
        <!-- 头部 -->
        <header>
            <!-- 返回按钮 -->
            <div class="back">Back</div>
            产品详细
            <!-- 消息 -->
            <div class="collection">
                <img src="./images/小星星.png" alt="">
            </div>
        </header>
        <!-- 主页部分 -->
        <main>
            <!-- 图片 -->
            <div class="picture">
                <img src="./images/图片.png" alt="">
            </div>
            <!-- 购买好评合适 -->
            <div class="detailed_content">
                <!-- 价格购买 -->
                <div class="buy">
                    <p class="left">￥32</p>
                    <input class="right_button" type="button" value="购买">
                </div>
                <!-- 好评 -->
                <div class="comment">
                    <div class="left">
                        <!-- 小星星 -->
                        <span class="img_box">
                            <img src="./images/小星星.png" alt="">
                        </span>
                        <p>
                            好评度
                            <span>99%</span>
                        </p>
                    </div>
                    <p class="right">
                        共605个评价>
                    </p>
                </div>
                <!-- 适合 -->
                <div class="fit">
                    <span class="left">适合用户</span>
                    <span class="right">></span>
                </div>
            </div>
            <!-- 内容 -->
            <div class="all_content">
                <!-- 正佳店 -->
                <div class="content">
                    <!-- 图片 -->
                    <div class="left">
                        <div class="img_text">
                            正佳店
                        </div>
                    </div>
                    <div class="right">
                        <div class="content_text">
                            <p class="store_name">
                                万岁寿司(正佳店)
                            </p>
                            <p class="stars">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <span>10分</span> 
                            </p>
                            <p class="distance">
                                离你100m
                            </p>
                            <p class="see">
                                查看详细 >>
                            </p>
                        </div>
                        <input type="button" value="进入" class="goin">
                    </div>
                </div>
                <!-- 体育西路 -->
                <div class="content">
                    <!-- 图片 -->
                    <div class="left">
                        <div class="img_text">
                            体育西店
                        </div>
                    </div>
                    <div class="right">
                        <div class="content_text">
                            <p class="store_name">
                                万岁寿司(体育西店)
                            </p>
                            <p class="stars">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <span>10分</span> 
                            </p>
                            <p class="distance">
                                离你100m
                            </p>
                            <p class="see">
                                查看详细 >>
                            </p>
                        </div>
                        <input type="button" value="进入" class="goin">
                    </div>
                </div>
                <!-- 昌岗店  -->
                <div class="content">
                    <!-- 图片 -->
                    <div class="left">
                        <div class="img_text">
                            昌岗店
                        </div>
                    </div>
                    <div class="right">
                        <div class="content_text">
                            <p class="store_name">
                                万岁寿司(昌岗店)
                            </p>
                            <p class="stars">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <img src="./images/小星星.png" alt="">
                                <span>10分</span> 
                            </p>
                            <p class="distance">
                                离你100m
                            </p>
                            <p class="see">
                                查看详细 >>
                            </p>
                        </div>
                        <input type="button" value="进入" class="goin">
                    </div>
                </div>
            </div>
        </main>
        <!-- 尾部 -->
        <footer>
            <div class="navlist">
                <a href="./index.html">
                    <div class="home">
                        <img src="./images/首页.png" alt="">
                    首页
                    </div>
                </a>
                <a href="./classification.html">
                    <div class="classification">
                        <img src="./images/分类.png" alt="">
                        分类
                    </div>
                </a>
                <a href="./find.html">
                    <div class="find">
                        <img src="./images/发现.png" alt="">
                        发现
                    </div>
                </a>
                <a href="./my.html">
                    <div class="my">
                        <img src="./images/我的.png" alt="">
                        我的
                    </div>
                </a>
            </div>
        </footer>
    </div>
</body>
</html>